@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';

.checkbox {
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: $dimension-3m;
  height: $dimension-3m;
}

.beforeContent {
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: $icon-s;
  height: $icon-s;

  color: $sys-neutral-text-light;

  svg {
    max-width: 100%;
    max-height: 100%;
  }
}

.expandableIcon {
  display: flex;
  align-items: center;
  color: $sys-neutral-text-light;
  fill: currentColor;
}

.markerContainer {
  @include composite-var($drop-list, 'item', 'marker-container');

  pointer-events: none;

  position: absolute;
  top: 0;
  left: 0;

  box-sizing: border-box;
  height: 100%;

  &:before {
    @include composite-var($drop-list, 'item', 'marker');

    content: '';
    display: block;
    height: 100%;
  }
}
.droplistItem {
  width: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      padding-left: calc(
        var(--level, 0) * $dimension-050m + simple-var($drop-list, 'item', $size, 'container', 'padding-left')
      );

      .headline {
        @include composite-var($drop-list, 'item', $size, 'headline');
      }
    }
  }

  &[data-non-pointer] {
    cursor: inherit;
  }
}

.innerWrapper {
  &[data-disabled] {
    .expandableIcon {
      color: $sys-neutral-text-disabled;
    }

    .beforeContent {
      opacity: $opacity-a064;
    }

    .droplistItem {
      cursor: not-allowed;
    }
  }

  &[data-has-checked],
  &[data-checked] {
    &[data-variant='single'] {
      &::before {
        opacity: $opacity-a008;
        background-color: $sys-primary-accent-default;
      }

      &:hover {
        &::before {
          opacity: $opacity-a016;
          background-color: $sys-primary-accent-default;
        }
      }
    }

    .markerContainer:before {
      background-color: $sys-primary-accent-default;
    }

    .droplistItem:focus-visible {
      &[data-variant='single'] {
        outline-color: $sys-primary-accent-default;
      }
    }

    &[data-disabled] {
      .markerContainer:before {
        background-color: $sys-neutral-text-disabled;
      }
    }
  }
}

.content {
  overflow: hidden;
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
}
